<template>
  <Select
    ref="iSelect"
    v-model="G_value"
    filterable
    transfer
    clearable
    :size="G_conf.size"
    :multiple="G_conf.multiple"
    :placeholder="$srv.getI18nByPath(G_conf.placeholder)"
    @on-change="onChange"
    @on-select="onSelect"
    :disabled="!!config.disabled"
  >
    <Option
      v-for="(opt, index) in G_conf.list"
      :value="opt.data[G_conf.keyField]"
      :label="
        G_conf.i18n.list
          ? $srv.getI18nByPath(opt.data[G_conf.displayField])
          : opt.data[G_conf.displayField]
      "
      :tag="
        G_conf.i18n.list
          ? $srv.getI18nByPath(opt.data[G_conf.displayField])
          : opt.data[G_conf.displayField]
      "
      :key="index"
      :disabled="$srv.getx(opt, 'disabled', false)"
    >
      <div
        class="combobox-container"
        :style="{
          'grid-template-columns':
            'repeat(' +
            G_conf.field.length +
            ',' +
            100 / G_conf.field.length +
            '%)'
        }"
      >
        <div
          class="combobox-option"
          v-for="key in Object.keys(opt.data)"
          :key="key"
        >
          <!-- 图字库列表 -->
          <div
            class="combobox-option-item"
            v-if="opt.type === 'iconFont'"
            :class="['wy-icon', opt.data[key]]"
            :title="key"
          >
            {{
              G_conf.i18n.list
                ? $srv.getI18nByPath(opt.data[key])
                : opt.data[key]
            }}
          </div>
          <!-- 文字列表 -->
          <div
            class="combobox-option-item"
            v-else-if="opt.type === 'text'"
            :title="key"
          >
            {{
              G_conf.i18n.list
                ? $srv.getI18nByPath(opt.data[key])
                : opt.data[key]
            }}
          </div>
        </div>
      </div>
    </Option>
  </Select>
</template>
<script lang="ts">
import { I_conf, T_conf, T_srv, Tsrv, ifs, vue } from './config';

@T_srv.comp
export default class oCombobox extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 配置 */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  config: any;

  /* 配置 */
  @T_srv.prop({
    required: false,
    default: ''
  })
  value: string | Array<any>;

  @T_srv.watch('value')
  onValueChange(val) {
    this.G_value = val;
  }

  @T_srv.ref(`iSelect`) refSelect: any;

  private G_list: Array<any> = [];

  /* 组件名 */
  private G_compName: string = 'oCombobox';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  private G_conf: I_conf = new T_conf();

  private G_value: string | Array<any> = '';

  created() {
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.G_value = this.value;
    this.initConf();
  }

  private initConf() {
    const L_conf = this.G_conf;
    L_conf.multiple = !!this.config?.multiple;
    // this.G_value = this.config?.devaultValue ? this.config.devaultValue : '';
    this.G_conf.size = this.config?.size ? this.config.size : 'default';
    this.config?.placeholder && (L_conf.placeholder = this.config.placeholder);
    L_conf.field = Array.isArray(this.config?.field) ? this.config.field : [];
    L_conf.keyField = this.config?.keyField || '';
    L_conf.list = this.config?.list || [];
    L_conf.i18n.field = this.config?.i18n?.field || false;
    L_conf.i18n.list = this.config?.i18n?.list || false;
    L_conf.filter = this.config?.filter || false;
    L_conf.multiple = this.config?.multiple || false;
    L_conf.displayField = this.config?.displayField || '';
  }

  mounted() {
    /* 向父组件发送实例 */
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
  }

  public initValue(v: string | Array<any>): void {
    this.G_value = v;
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null;
  }

  // 选择变化时
  private onChange(v: any) {
    if (v) {
      this.$emit('input', v);
    }
    const data: Array<any> = [];
    if (this.G_conf.multiple) {
      v.forEach(ele => {
        data.push({
          key: ele,
          row: this.G_conf.list[
            this.G_conf.list.findIndex(
              itm => itm.data[this.G_conf.keyField] === ele
            )
          ]
        });
      });
    } else {
      data.push({
        key: v,
        row: this.G_conf.list[
          this.G_conf.list.findIndex(
            itm => itm.data[this.G_conf.keyField] === v
          )
        ]
      });
    }
    this.$emit('on-change', data);
  }

  // 选择时
  private onSelect(opt: any) {
    this.$emit('on-select', opt);
  }
}
</script>
<style lang="scss" scoped>
.combobox-container {
  display: grid;
  // grid-template-columns: repeat(3, 33%);
  grid-column-gap: 5px;
  width: 100%;
  .combobox-option {
    .combobox-option-item {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    i {
      margin-right: 10px;
      font-style: normal;
    }
  }
}
</style>
